<script setup lang="ts">
import BaseInput from '~/components/BaseInput.vue'

const { open, close } = useDialog(renderDiv, {}, { showClose: true })
const searchQuery = ref('')
const searchPlaceholder = 'sdfs'
function test() {
    message.success('Hello World')
}
function renderDiv() {
    return h('div', { class: 'pt-2' }, h(BaseInput, { name: 'test' }))
}
</script>
<template>
    <div>
        <div style="display: flex">
            <h1 class="relative">
                Welcome to the casino {{ $t('5h_sports_detail_above_table_tab_bar_all_bets') }}
            </h1>

            <BaseTooltip />
            <BaseButton class="h-10" @click="test">success</BaseButton>
            <BaseButton class="h-10" @click="open">弹窗</BaseButton>
            <BaseInput name="search" search v-model="searchQuery" :placeholder="searchPlaceholder">
                <template #right-icon>
                    <BaseIcon name="uni-close2" class="text-[.625rem]" />
                </template>
            </BaseInput>

        </div>
    </div>
</template>
